<template>
  <!-- 跟单策略 -->
  <view>
    <view class="gendantop-box">
      <view class="gendantop-title">
        <text>合约马丁</text>
        <text class="gendancount">0人正在跟单</text>
      </view>
      <text class="gendan-time">2021/06/30</text>
    </view>
    <!-- 用户信息 -->
    <view class="user-info" @click="gendanfaqiren">
      <view class="user-info-left">
        <image src="../../static/active-my.png" mode=""></image>
        <text>150****2154</text>
      </view>
      <uni-icons color="#b0bbd9" size="22" type="arrowright"></uni-icons>
    </view>
    <!-- 用户信息结束 -->
    <view class="yongxu">
      <text class="yongxu-left">okex</text>
      <text class="yongxu-center">(EOS永续/USDT)</text>
      <text class="yongxu-right">双向10X</text>
    </view>
    <!-- 策略表现开始 -->
    <view class="biaoxian-title"> 策略表现</view>
    <view class="biao-content">
      <view class="biao-content-top">
        <view class="touru">
          <text>总投入(USDT)</text>
          <view class="touru-money">100</view>
        </view>
        <view class="shouyi">
          <view>总收益(USDT)</view>
          <text class="shouyi-money">+234423.34234(423432)</text>
        </view>
      </view>
      <view class="biao-content-bottom">
        <view class="">
          <view class="">账户权益(USDT)</view>
          <text class="quanyi-left">3054.34</text>
        </view>
        <view class="">
          <view class="">持仓盈亏(USDT)</view>
          <text class="quanyi-center">-0.34</text>
        </view>
        <view class="shouyi">
          <view class="">总年化</view>
          <text class="quanyi-right">45421.11%</text>
        </view>
      </view>
    </view>
    <!-- 策略表现结束 -->
    <!-- 跟单佣金开始 -->
    <view class="biaoxian-title">跟单信息</view>
    <view class="yongjin">
      <text>每日佣金</text>
      <text>2VTN(含体现权益)</text>
    </view>
    <!-- 跟单佣金结束 -->
    <!-- 跟单信息开始 -->
    <view class="biaoxian-title">跟单信息</view>
    <view class="biao-content-bottom xian">
      <view class="">
        <view class="">累计投入(USDT)</view>
        <text class="xinxi-col">0</text>
      </view>
      <view class="">
        <view class="">累计收益(USDT)</view>
        <view class="xinxi-col">
          <text>0</text>
          <text class="leiji">(0%)</text>
        </view>
      </view>
      <view class="shouyi">
        <view class="">累计人数</view>
        <text class="xinxi-col">0</text>
      </view>
    </view>
    <!-- 跟单信息结束 -->
    <!-- 分享和一键跟单按钮 -->
    <view class="gendanbox">
      <view class="fenxiang">
        <u-icon name="zhuanfa" color="#FFFFFF" size="46"></u-icon>
        <view class="">分享</view>
      </view>
      <button type="primary">一键跟单</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      // 点击用户信息跳转到跟单发起人页面
      gendanfaqiren(){
        uni.navigateTo({
          url:'../gendanInitiator/gendanInitiator'
        })
      }
    }
  }
</script>

<style>
  page {
    background-color: #0a1332;
    position: relative;
    padding-bottom: 250rpx;
  }

  .gendantop-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 180rpx;
    background-color: #121d3b;
    padding: 30rpx 0 40rpx 40rpx;
  }

  .gendantop-title {
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
    font-size: 32rpx;
  }

  .gendancount {
    background-color: #0e7bfe;
    font-size: 26rpx;
    padding: 8rpx 20rpx;
    border-radius: 40rpx 0 0 40rpx;
  }

  .gendan-time {
    color: #6a7595;
    font-size: 12rpx;
  }

  .user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40rpx 30rpx;
    color: #FFFFFF;
    font-size: 32rpx;
  }

  .user-info-left image {
    width: 70rpx;
    height: 70rpx;
    vertical-align: middle;
    margin-right: 30rpx;
  }

  .yongxu {
    color: #FFFFFF;
    margin: 0 20rpx;
  }

  .yongxu-left {
    font-size: 28rpx;
    margin-right: 10rpx;
  }

  .yongxu-right {
    color: #a8b1d0;
    font-size: 20rpx;
    background-color: #1f2d4a;
    padding: 4rpx 10rpx;
    margin-left: 20rpx;
  }

  .biaoxian-title {
    border-left: 4rpx solid #007AFF;
    margin: 40rpx 0 20rpx 20rpx;
    padding-left: 20rpx;
    color: #FFFFFF;
    font-size: 28rpx;
  }

  .biao-content {
    height: 300rpx;
    border-radius: 15rpx 0 0 0;
    margin: 0 20rpx;
    overflow: hidden;
    color: #667494;
  }

  .biao-content-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 130rpx;
    background-color: #202b47;
    padding: 0 30rpx;
    border-radius: 0 0 15rpx 0;
  }

  .biao-content-bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 170rpx;
    background-color: #121d3b;
  }

  .touru-money {
    font-size: 34rpx;
    color: #FFFFFF;
  }

  .shouyi {
    text-align: right;
  }

  .shouyi-money {
    color: #08b195;
    font-size: 34rpx;
  }

  .quanyi-left {
    color: #FFFFFF;
    font-size: 26rpx;
  }

  .quanyi-center {
    font-size: 26rpx;
    color: #cf5a7f;
  }

  .quanyi-right {
    font-size: 26rpx;
    color: #08b195;
  }

  .xian {
    color: #667494;
  }

  .xinxi-col {
    color: #bfcae8;
  }

  .leiji {
    font-size: 24rpx;
  }

  .yongjin {
    display: flex;
    justify-content: space-between;
    margin: 0 20rpx;
    height: 120rpx;
    line-height: 120rpx;
    background-color: #121d3b;
    color: #b7c2de;
    padding: 0 40rpx;
  }

  .yongjin text:nth-child(1) {
    color: #667494;
  }

  .gendanbox {
    position: fixed;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 200rpx;
    background-color: #1d2c49;
    padding-right: 40rpx;
  }

  .fenxiang {
    width: 30%;
    text-align: center;
    color: #FFFFFF;
  }

  .gendanbox button {
    width: 80%;
  }
</style>
